<template>
    <div class="bussiness container-content">
        <el-menu
            :default-active="type"
            class="el-menu-demo"
            mode="horizontal"
            @select="selectProcess"
        >
            <el-menu-item index="4">发起流程</el-menu-item>
            <el-menu-item index="1">待办流程</el-menu-item>
            <el-menu-item index="2">已办任务</el-menu-item>
            <el-menu-item index="3">我发起的</el-menu-item>
        </el-menu>
        <div v-show="this.type === '4'">
            <initiateProcess/>
        </div>
        <div v-show="this.type !== '4'">
            <task :type="type"/>
        </div>
    </div>
</template>

<script>
import initiateProcess from './initiateProcess.vue'
import task from './task'

export default {
    name: 'business',
    data() {
        return {
            type: '4'
        }
    },
    components: {
        initiateProcess,
        task
    },
    methods: {
        selectProcess(index) {
            this.type = index
        }
    }
}
</script>

<style lang="scss" scoped>
.bussiness {
    overflow: auto;
}

::v-deep .el-tabs__nav-scroll {
    display: flex;
    justify-content: center;
}
</style>
